<template>
  <view v-if="visible" class="main-page">
    <view class="header-wrapper">
      <view class="top" :style="{ height: safeTop + 'px' }"></view>
      <view class="nav-box">
        <image class="avatar" src="/static/test/avatar.png" mode="aspectFill"></image>
        <view class="user-info">你好！{{userName}}</view>
      </view>
      <view class="search-box">
        <input v-model="payload.keywrod" type="text" placeholder="请输入关键词">
        <view class="btn" @click="loadRes">
          <image class="icon" src="/static/icon/search-icon.png"></image>
        </view>
      </view>
    </view>
    <view class="tabs-list">
      <view 
        v-for="item in tabs" 
        :key="item.value" 
        class="tab-item" 
        :class="{ active: payload.type === item.value }" 
        @click="updateActive(item.value)"
      >
        <text>{{item.label}}({{item.count}})</text>
        <view class="line"></view>
      </view>
    </view>
    <view class="order-wrapper">
      <scroll-view 
        class="scroll"
        scroll-y
        refresher-enabled
        :refresher-triggered="triggered"
        @refresherrefresh="handlePullDown"
        @scrolltolower="handleReadyBottom"
      >
        <order-list ref="OrderListRef" @update="updateCount" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
  const app = getApp()
  
  export default {
    data() {
      return {
        initLoad: false,
        visible: false,
        safeTop: 0,
        tabs: [
          { label: '待确认', value: '2', count: 0 },
          { label: '待完成', value: '4', count: 0 },
          { label: '待审核', value: '5', count: 0 },
          { label: '已完成', value: '6', count: 0 },
          { label: '锁定', value: '7', count: 0 }
        ],
        payload: {
          type: '2',
          keywrod: ''
        },
        triggered: false,
        user: {},
      }
    },
    computed: {
      userName() {
        if (this.user.name) {
          return this.user.name
        }
        if (this.user.phone) {
          return this.user.phone.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$3')
        }
        return ''
      }
    },
    methods: {
      updateCount(row) {
        this.tabs = this.tabs.map((v, i) => {
          v.count = row[i]
          return v
        })
        console.log(row)
      },
      // 切换状态
      updateActive(active) {
        if (this.payload.type !== active) {
          this.payload.type = active
          this.loadRes()
        }
      },
      loadRes(reset = true, callback = null) {
        this.$refs.OrderListRef.loadRes(reset, callback, this.payload)
      },
      // 底部追加数据
      handleReadyBottom() {
        this.loadRes(false)
      },
      // 下拉刷新数据
      handlePullDown() {
        this.triggered = true
        this.loadRes(true, () => {
          this.triggered = false
        })
      }
    },
    onLoad() {
      this.safeTop = this.$global.safeAreaTop
      if (app.checkLogin()) {
        this.visible = true
        this.user = uni.getStorageSync('userInfo')
      } else {
        this.visible = false
      }
    },
    onReady() {
      this.initLoad = true
      this.loadRes()
    },
    onTabItemTap() {
      if (this.initLoad) {
        this.loadRes()
      }
    },
    onUnload() {
      this.initLoad = false
    }
  }
</script>

<style lang="scss">
.main-page {
  @include flex(column);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .header-wrapper {
    width: 100vw;
    background: linear-gradient(to right, #fffae9 0%, #d3fafe 50%, #ffedea 100%);
    overflow: hidden;
    .nav-box {
      height: 44px;
      @include flex;
      box-sizing: border-box;
      padding: 0 30rpx;
      .avatar {
        width: 32px;
        height: 32px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .user-info {
        flex: 1;
        overflow: hidden;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .search-box {
      margin: 6px 30rpx 0;
      border: 1px solid $uni-color-primary;
      background-color: #f7fffd;
      @include flex;
      border-radius: 19px;
      input {
        display: block;
        flex: 1;
        overflow: hidden;
        height: 36px;
        line-height: 1.4;
        font-size: 14px;
        box-sizing: border-box;
        padding: 0 20px;
        color: $uni-color-primary;
      }
      .btn {
        width: 48px;
        height: 36px;
        @include flex;
        .icon {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .tabs-list {
    width: 100vw;
    height: 100rpx;
    @include flex(row,center,space-between);
    box-sizing: border-box;
    padding: 0 30rpx;
    .tab-item {
      font-size: 14px;
      color: #666;
      height: 100rpx;
      @include flex(column);
      line-height: 1.2;
      transition: all 300ms;
      transform-origin: center center;
      .line {
        display: none;
      }
      &.active {
        font-size: 16px;
        color: #333;
        position: relative;
        font-weight: bold;
        .line {
          display: block;
          background-color: #20659C;
          width: 30px;
          height: 3px;
          border-radius: 2px;
          margin-top: 6px;
        }
      }
    }
  }
  .order-wrapper {
    flex: 1;
    width: 100vw;
    overflow: hidden;
    .scroll {
      height: 100%;
      width: 100%;
    }
  }
}
</style>